<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - jqGird</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- jqgrid-->
    <link href="css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <style>
        /* Additional style to fix warning dialog position */

        #alertmod_table_list_2 {
            top: 900px !important;
        }
    </style>

</head>

<body class="gray-bg">

    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>浏览</h2>
        </div>
        <div class="col-sm-8">
            <div class="title-action">
                <a href="?r=fields/field_view" class="btn btn-info dropdown-toggle" title="浏览">浏览</a>
                <a href="?r=fields/field_structure" class="btn btn-primary dropdown-toggle" title="结构">结构</a>
                <a href="#" class="btn btn-warning dropdown-toggle" title="sql">sql</a>
                <a href="#" class="btn btn-success dropdown-toggle" title="搜索">搜索</a>
                <a href="#" class="btn btn-danger dropdown-toggle" title="插入">插入</a>
                <a href="#" class="btn btn-info dropdown-toggle" title="导入">导入</a>
                <a href="#" class="btn btn-primary dropdown-toggle" title="导出">导出</a>
                <a href="#" class="btn btn-warning dropdown-toggle" title="操作">操作</a>
                <a href="#" class="btn btn-success dropdown-toggle" title="触发器">触发器</a>
            </div>
        </div>
    </div>

    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
                <div class="col-sm-12">
                    <div class="ibox ">
                       
                        <div class="ibox-content">

                            <div class="jqGrid_wrapper">
                                <table id="table_list_2">
                                     
                                </table>
                                <div id="pager_list_2"></div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>



    <!-- Peity -->
    <script src="js/plugins/peity/jquery.peity.min.js"></script>

    <!-- jqGrid -->
    <script src="js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    <script src="js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {

            $.jgrid.defaults.styleUI = 'Bootstrap';
            // str = ['序号', '日期', '客户', '金额', '运费', '总额', '备注'],
            // console.log(str);
            _k = $('.breadcrumb').find('li:eq(0) a').text();
            _db = $('.breadcrumb').find('li:eq(1) a').text();
            _table_name = $('.breadcrumb').find('li:eq(2) strong').text();
            $.ajax({
                type:"post",
                url:"?r=fields/ajaxfield",
                data:{
                    k:_k,
                    db:_db,
                    table_name:_table_name
                },
                dataType:'json',
                success:function($data){
                    var _data = $data;
                    // alert($data);
                    // console.log($data[0]);
                    // var mydata = $data[1];
                    var mydata = _data[0];
                // console.log(mydata)
                // Configuration for jqGrid Example 2
                $("#table_list_2").jqGrid({
                    data: mydata,
                    datatype: "local",
                    height: 450,
                    autowidth: true,
                    shrinkToFit: true,
                    rowNum: 20,
                    rowList: [10, 20, 30],
                    colNames: _data[1],
                    colModel: _data[2],
                    pager: "#pager_list_2",
                    viewrecords: true,
                    caption: _data[3],
                    add: true,
                    edit: true,
                    addtext: 'Add',
                    edittext: 'Edit',
                    hidegrid: false
                });

                // Add selection
                $("#table_list_2").setSelection(4, true);


                // Setup buttons
                $("#table_list_2").jqGrid('navGrid', '#pager_list_2', {
                    edit: true,
                    add: true,
                    del: true,
                    search: true
                }, {
                    height: 200,
                    reloadAfterSubmit: true
                });

                // Add responsive to jqGrid
                $(window).bind('resize', function () {
                    var width = $('.jqGrid_wrapper').width();
                    
                    $('#table_list_2').setGridWidth(width);
                });
                }

            })
            // Examle data for jqGrid
            

        });

    </script>

    
    

</body>

</html>
<script>
    // $(document).on('mouseover','.ui-pg-div',function(){
    //     // alert('aa')
    //     _this = $(this);
    //     _this.find('span').attr('id','click_id');
    // });
    // $(document).on('click','#click_id',function(){
    //     alert('aa')
    // })
</script>
